<!DOCTYPE html>
<html>
  <head>
    <title>Cloud</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

    <!-- date range -->
    <link rel="stylesheet" type="text/css" href="css/daterange.css">

    <!-- Main CSS -->
    <link href="css/main.css" rel="stylesheet" media="screen">

    <!-- Font Awesome CSS -->
    <link href="fonts/font-awesome.css" rel="stylesheet">
    
    <!--[if IE 7]>
      <link rel="stylesheet" href="fonts/font-awesome.css">
    <![endif]-->

    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="container">

      <!-- Top bar start -->
      <div class="top-bar">
        
        <div class="logo">
          Trader<sup><i class="icon-glass"></i></sup>
        </div>

        <!-- Icon nav start -->
        <ul id="icon-nav">
          <li>
            <a href="#">
              <i class="icon-bell"></i>
              <span class="count-label"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-comment-alt"></i>
              <span class="count-label count-lb-yellow"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-envelope-alt"></i>
              <span class="count-label count-lb-green"></span>
            </a>
          </li>
        </ul>
        <!-- Icon nav end -->

        <!-- Search bar start -->
        <div class="custom-search hidden-xs">
          <input type="text" class="search-query" placeholder="搜索">
          <i class="icon-search"></i>
        </div>
        <!-- Search bar end -->

      </div>
      <!-- Top bar end -->

      <!-- Header start -->
      <header class="navbar" role="navigation">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">&nbsp;</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
          
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="index.html">设置</a>
            </li>
            <li>
              <a href="graphs.html">交易</a>
            </li>
            
            <li>
              <a href="tables.html">头寸</a>
            </li>
            <li>
              <a href="gallery.html">挂单</a>
            </li>

            <li>
              <a href="gallery.html">历史</a>
            </li>

            <li>
              <a href="gallery.html">历史</a>
            </li>


            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bonus Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Login</a></li>
                <li class="divider"></li>
                <li><a href="error.html">404</a></li>
                <li><a href="blankpage.html">Blank Page</a></li>
              </ul>
            </li>
          </ul>
          
          <!-- Mini navigation start -->
          <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Sandy <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">My Account</a></li>
                <li><a href="calendar.html">My Calendar</a></li>
                <li><a href="#">My Inbox</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Logout</a></li>
              </ul>
            </li>
          </ul>
          <!-- Mini navigation end -->
        </nav>
      </header>
      <!-- Header end -->

      <!-- Page title Start -->
      <div class="page-title">

        <div class="row ">
        
          <div class="col-md-6 col-sm-6 col-xs-6">
            <h2>Dashboard</h2>
            <ul class="breadcrumb">
              <li>Home</li>
              <li>Dashboard</li>
            </ul>
          </div>

          <div class="col-md-6 col-sm-6 col-xs-6">
            
            <!-- Mini Nav Right Start -->
            <ul id="page-settings">

              <li id="reportrange" >
                <i class="icon-calendar"></i>
                <span></span> <b class="caret"></b>
              </li>

              <li>
                <i class="icon-cog"></i>
              </li>
            </ul>
            <!-- Mini Nav Right End -->

            <!-- Stats Start -->
            <ul class="stats hidden-sm hidden-xs">
              <li>
                <span id="orders" class="graph"></span>
                <div class="details">
                  <span class="big">2,591</span>
                  <span class="small">Orders</span>
                </div>
              </li>
              <li>
                <span id="currentBalance" class="graph"></span>
                <div class="details">
                  <span class="big">$7,345</span>
                  <span class="small">Balance</span>
                </div>
              </li>
            </ul>
            <!-- Stats End -->

          </div>
        </div>
      </div>
      <!-- Page title end -->

      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Alerts</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">Last 10 days</a>
            </div>
            <div class="panel-body">
              <div class="alert alert-danger fade in">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true" data-original-title="" title="">x</button>
                <h4>Oh snap! You got an error!</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p>
                  <button type="button" class="btn btn-danger" data-original-title="" title="">Take this action</button>
                  <button type="button" class="btn btn-default" data-original-title="" title="">Or do this</button>
                </p>
              </div>
              <div class="alert alert-block alert-danger fade in">
                <button data-dismiss="alert" class="close" type="button" data-original-title="">
                  x
                </button>
                <p>
                  Learn by examples! At W3Schools you will find a lot of jQuery examples test yourself.
                </p>
              </div>
              <div class="alert alert-block alert-warning fade in">
                <button data-dismiss="alert" class="close" type="button" data-original-title="">
                  x
                </button>
                <p>
                  Wix makes it easier than ever to create a stunning website for free designer-made HTML5 templates.
                </p>
              </div>
              <div class="alert alert-block alert-success fade in">
                <button data-dismiss="alert" class="close" type="button" data-original-title="">
                  x
                </button>
                <p>
                  Enhance your website by adding popular web Apps &amp; Services like Facebook Google Maps &amp; SoundCloud.
                </p>
              </div>
              <div class="alert alert-block alert-info fade in no-margin">
                <button data-dismiss="alert" class="close" type="button" data-original-title="">
                  x
                </button>
                <p>
                  So whether you're a designer, programmer, musician, artist or small business owner, for everyone.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Large Notifications</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">Last 10 days</a>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4 col-sm-4">
                  <div class="alert alert-block alert-success no-margin">
                    <button data-dismiss="alert" class="close" type="button" data-original-title="" title="">
                      x
                    </button>
                    <h3 class="text-white">50% SALE!</h3>
                    <p class="text-white">With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.</p>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4">
                  <div class="alert alert-block alert-info no-margin">
                    <button data-dismiss="alert" class="close" type="button" data-original-title="" title="">
                      x
                    </button>
                    <h3 class="text-white">Daily Deals!</h3>
                    <p class="text-white">With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.</p>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4">
                  <div class="alert alert-block alert-danger no-margin">
                    <button data-dismiss="alert" class="close" type="button" data-original-title="" title="">
                      x
                    </button>
                    <h3 class="text-white">The Design</h3>
                    <p class="text-white">With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="row">
        <div class="col-md-12 col-sm-12 col-sx-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Callouts</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">Last 10 days</a>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4 col-sm-4">
                  <div class="callout callout-warning no-margin">
                    <h4>Cross-browser compatibility</h4>
                    <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
                  </div>
                </div>

                <div class="col-md-4 col-sm-4">
                  <div class="callout callout-success no-margin">
                    <h4>Cross-browser compatibility</h4>
                    <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
                  </div>
                </div>

                <div class="col-md-4 col-sm-4">
                  <div class="callout callout-info no-margin">
                    <h4>Cross-browser compatibility</h4>
                    <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>





    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>


    <!-- Sparkline graphs -->
    <script src="js/sparkline.js"></script>

    <!-- Tyny Scrollbar -->
    <script src="js/tiny-scrollbar.js"></script>

    <!-- Date Range -->
    <script src="js/daterange/moment.js"></script>
    <script src="js/daterange/daterangepicker.js"></script>

    <!-- Custom JS -->
    <script src="js/custom.js"></script>
    <script src="js/custom-index.js"></script>

  </body>
</html>